<template>
	<view class="pb-128">
		<uni-nav-bar @clickLeft="$tab.back()" :fixed="true" left-icon="left" backgroundColor="transparent"
			:statusBar="true" :border="false" />
		<view class="box-1 flex items-center justify-around" :style="{
			background:`url(${globalConfig.appConfig.loginBg})`,
			backgroundSize:'100% 100%'
		}">
			<image :src="globalConfig.appConfig.loginIcon" class="image-1" mode="widthFix"></image>
		</view>
		<view class="px-32">
			<view class="box-2">
				{{isPayPassword == 1 ? '修改支付密码' : '修改密码'}}
			</view>
		</view>
		<view class="c px-32 mt-48">
			<u--form labelPosition="left" :model="form" :value="form" ref="form">
				<u-form-item prop="phonenumber" borderBottom>
					<u--input :value="userInfo.phonenumber" border="none" placeholder="手机号" disabled
						disabledColor="#FFF"></u--input>
				</u-form-item>
				<u-form-item prop="oldPassword" borderBottom>
					<u--input v-model="form.oldPassword" type="password" border="none" placeholder="请输入旧密码"></u--input>
				</u-form-item>
				<u-form-item prop="newPassword" borderBottom>
					<u--input v-model="form.newPassword" type="password" border="none" placeholder="请输入新密码">
					</u--input>
				</u-form-item>
			</u--form>

			<view class="loginBtn text-32 text-center text-FFF" @click="submit">
				确认修改
			</view>
			
			<view class="flex mt-48 justify-around">
				<view class="text-20 forget" @click="goForget" v-if="isPayPassword == 1">
					忘记支付密码
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		revisepassword,
	} from "@/api/login.js"
	export default {
		data() {
			return {
				globalConfig: getApp().globalData.config,
				form: {
					oldPassword: "",
					newPassword: "",
				},
				correct: "",
				userInfo: this.$store.getters.userInfo,
				rules: {
					oldPassword: {
						required: true,
						message: '旧密码不能为空'
					},
					newPassword: {
						required: true,
						message: '新密码不能为空'
					}
				},
				isPayPassword:1
			};
		},
		onLoad(e) {
			this.isPayPassword = e.isPayPassword
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			goForget(){
				this.$tab.nav(`/pages/forgetPassword?type=0`)
			},
			submit() {
				var that = this;
				this.$refs.form.validate().then(res => {
					if(this.isPayPassword == 1){
						let param = {
							newPayPassword: this.form.newPassword,
							oldPayPassword: this.form.oldPassword
						};
						this.$Api.user.updatePayPassword(param).then(res => {
							this.$modal.msgSuccess("修改成功")
							this.$tab.back(1500)
						})
					}else{
						let param = {
							newPassword: this.form.newPassword,
							oldPassword: this.form.oldPassword
						};
						revisepassword(param).then(res=>{
							this.$modal.msgSuccess("修改成功")
							setTimeout(() => {
								uni.reLaunch({
									url: "/pages/login"
								})
							}, 1500)
						})
					}
				})
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.box-1 {
		width: 750rpx;
		height: 750rpx;
		padding-top: 100rpx;

		.image-1 {
			width: 208rpx;
		}
	}

	.box-2 {
		color: #FA554E;
		font-size: 56rpx;
		font-weight: bold;
	}

	/deep/ .uni-navbar {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}

	.index {
		padding: 0 32px;
		position: relative;
	}

	/deep/ .u-form-item__body__right__message {
		margin-left: 0 !important;
	}

	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: #E2382B;
		border-radius: 8rpx;
		line-height: 96rpx;
		margin: 108rpx auto 48rpx;
	}

	.info {
		font-size: 14px;
	}

	.register {
		height: 48rpx;
		border-radius: 4rpx;
		color: #999;
		font-size: 16rpx;
		line-height: 48rpx;
		text-align: center;
	}


	.c {
		width: 100%;

		/deep/ .u-button__text,
		.u-button--info {
			background-color: #fff;
			border: none !important;
			color: #F89809;
		}
	}

	/deep/ span {
		white-space: nowrap;
	}
</style>


<style scoped lang="scss">
	/* #ifdef  MP-WEIXIN */
	/deep/ .WEIXIN {
		.u-form-item__body__left {
			display: none;
		}
	}

	/* #endif */
</style>